<template>
  <div class="class-main">
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="search.title" size="small" placeholder="文章名称模糊查询"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="search.author" size="small" placeholder="作者"></el-input>
        </el-col>
        <el-col :span="6" :offset="8">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
          <el-button type="default" size="small" @click="doReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="content" >
      <el-card class="card">
        <div slot="header">
          <el-button type="primary" @click="goAdd">新增</el-button>
        </div>
        <Pagination :page="page" align="right"></Pagination>
        <el-table :data="articleList" border stripe>
          <el-table-column fixed type="index" label="#" :width="50"></el-table-column>
          <el-table-column prop="title" label="文章标题" :width="300"></el-table-column>
          <el-table-column prop="author" label="作者" :width="100"></el-table-column>
          <el-table-column prop="desc" label="文章描述" :width="300"></el-table-column>
          <el-table-column prop="desc" label="封面图片" :width="300">
              <template slot-scope="scope">
                <img class="cover-img" :src="scope.row.cover" alt="" >
              </template>
          </el-table-column>
          <el-table-column label="是否最热" :width="100">
            <template slot-scope="scope">
                {{scope.row.hot=="0"?'否':'热门'}}
            </template>
          </el-table-column>
          <el-table-column label="阅读量/赞" :width="100">
            <template slot-scope="scope">
                 <span>{{scope.row.viewCount+' / '+scope.row.zanCount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" :width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" :width="300">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
              <el-button type="default" size="mini" @click="goView(scope.row.id)">查看</el-button>
              <el-button type="danger" size="mini" @click="goDel(scope.row.id)">删除</el-button>
              
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <Detail ref="detail"></Detail>
  </div>
</template>

<script>
import articleApi from "@/api/content/article";
import Pagination from "@/components/common/Pagination";
import pageMixin from "@/mixins/pageMixin";
import Detail from './detail'
import {resetData} from '@/utils/index'
import _ from 'lodash'
export default {
  name: "Article",
  components: {
    Pagination,
    Detail
  },
  mixins: [pageMixin],
  data() {
    return {
      loading: false,
      dialog: false,
      search: {},
      articleList: []
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    doSearch() {
      resetData(this,'page')
      this.getArticleList()
    },
    doReset() {
      resetData(this,'search')
      this.doSearch()
    },
    getArticleList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      }
      // 过滤无效参数
      params = _.pickBy(params,item=> item)
      articleApi.getArticleList(params).then(({data}) => {
        this.articleList = data.list;
        this.page.start = data.pageNumber;
        this.page.limit = data.pageSize;
        this.page.total = data.totalRow;
      });
    },
     goAdd() {
      this.$refs.detail.openDialog();
    },
    goEdit(id){
      this.$refs.detail.openDialog(id);
    },
    goView(){

    },
    goDel(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          articleApi.delArticle({
            id
          }).then(res=>{
            if(res.code){
               this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getArticleList()
            }else{
              this.$message.error('删除失败!')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  }
};
</script>

<style lang='scss' scoped>
.class-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
  }
  .content {
      .cover-img{
          width: 100px;
          height: 40px;
          object-fit: contain;
      }
  }
}
</style>
